<template>
<div class="aside">
  <input type="text" placeholder="双十一大促" />
  <Swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <SwipeItem v-for="item in imgList" :key="item"
      ><img :src="item" alt=""
    /></SwipeItem>
  </Swipe>
</div>
</template>
<script>
import { Swipe, SwipeItem } from "vant";
import { onMounted, ref } from "vue";
import { asideApi } from "../../utils/api";
export default {
  setup() {
    const imgList = ref([]);
    // onMounted(async () => {
    //   const data = await fetch("http://www.pudge.wang:4000/home/banner").then(
    //     (res) => res.json()
    //   );
    //   imgList.value = data.result.list;
    //   console.log(data.result.list);
    //   console.log(imgList.value);
    // });

    const getData = async () => {
      const res = await asideApi();
      imgList.value = res.result.list;
    };
    onMounted(() => {
      getData();
    });

    // onMounted(async () => {
    //   const res = await asideApi();
    //   imgList.value = res.result.list;
    //   console.log(imgList.value);
    // });

    return {
      imgList,
    };
  },
  components: {
    Swipe,
    SwipeItem,
  },
};
</script>
<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
my-swipe {
  position: relative;
}
.aside /deep/ .van-swipe__indicator {
  width: 30px;
  height: 4px;
  border-radius: 2px;
}
img {
  width: 100%;
  height: 200px;
}
.van-swipe {
  height: 200px;
}
input {
  width: 94%;
  height: 30px;
  border-radius: 15px;
  outline: none;
  border: none;
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 5px;
  left: 3%;
  z-index: 10;
  color: white;
  text-indent: 2em;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #fff;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #fff;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #fff;
}
</style>